<template>
	<view :style="{ paddingTop: setmargintop() + 'px' }">
		<view class="new-top-nav">
			<uni-nav-bar title="产品详情" backgroundColor="#fff" color="#000" statusBar="true"
				@clickLeft="back()" left-icon="arrowleft"></uni-nav-bar>
		</view>
		<view class="shop">
			<!-- //轮播图 -->
			<u-swiper class="shop-swiper" imgMode="scaleToFill" height="442rpx" :list="imgList" @change="e => currentNum = e.current"
				:autoplay="false" indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
				</view>
			</u-swiper>
			<!-- //====文字 -->
			<view class="shop-text">
				<view class="shop-text-one">
					<view class="shop-text-one-title">{{ productDetail.productName }}</view>
				</view>
				<view v-if="productDetail.specDesc" class="shop-text-specDesc">
					<text style="color: #000;margin-right: 6rpx;">规格描述:</text>{{productDetail.specDesc}}
				</view>
				<view class="shop-text-two">
					<view class="shop-text-two-title">
						基本信息
					</view>
					<view class="shop-text-two-list">
						<view class="shop-text-two-detail">
							品牌：{{ productDetail.brand }}
						</view>
						<view class="shop-text-two-detail">
							规格：{{ productDetail.specificationValue }}{{ productDetail.specificationValueUnit }}/{{ productDetail.specificationUnit }}
						</view>
						<view class="shop-text-two-detail">
							型号：{{ productDetail.model }}
						</view>
					</view>
				</view>
				
				<u-divider text="产品介绍"></u-divider>
				<view class="shop-text-four">
					{{ productDetail.description }}
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import productApi from '@/api/socialized-servce/breed-aquatics/product-corridor/index.js'
	export default {
		data() {
			return {
				// 轮播图
				currentNum: 0,
				productDetail: {}, // 产品详情
				imgList: [],
			};
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			this.getProductDetail()
		},
		methods: {
			// 获取产品详情
			getProductDetail() {
				productApi.queryById({
					id: this.id
				}).then(res => {
					this.productDetail = res.data
					this.imgList = res.data.imgList.map(el => {
						return el.productImgUrl
					})
				})
			},
			// 设置顶部高度
			setmargintop() {
				let top = 0
				top = this.customBar + 10
				return top
			},
			//返回上一步
			back() {
				uni.navigateBack({ delta: 1 })
			}
		}
	}
</script>

<style lang="scss" scoped>

	.new-top-nav {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
	}
	
	.shop {
		margin: 0 auto;
		width: 684rpx;
		height: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		padding: 20rpx 0 50rpx;

		::v-deep .u-swiper {
			width: 630rpx;
			height: 442rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
			margin: 0 auto;
		}

		.shop-text {
			width: 630rpx;
			margin: 30rpx auto 0;

			.shop-text-one {
				display: flex;
				justify-content: space-between;

				.kepeisong {
					width: 100rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 22rpx 22rpx 22rpx 22rpx;
					border: 2rpx solid #3EC99A;
					font-size: 24rpx;
					color: #3EC99A;
				}

				.shop-text-one-title {
					width: 100%;
					font-size: 36rpx;
					color: #4E4E4E;
					// white-space: wrap;//换行
					word-break:break-all;
				}
			}

			.shop-text-two {
				
				.shop-text-two-list {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.shop-text-two-detail {

						width: 198rpx;
						height: 64rpx;
						line-height: 64rpx;
						text-align: center;
						background: #E2F0FF;
						margin-right: 18rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						padding: 0 10rpx;
					}
				}

				.shop-text-two-title {
					width: 96rpx;
					height: 24rpx;
					line-height: 24rpx;
					font-size: 24rpx;
					color: #5186BA;
					margin: 26rpx 0rpx 14rpx 0rpx;
				}

			}

		}
	}

	::v-deep .uni-goods-nav {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		height: 136rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 6rpx 2rpx rgba(1, 32, 45, 0.08);
		display: flex;
		align-items: center;
	}
	
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
	.shop-text-specDesc {
		font-size: 18rpx;
		color: #666;
	}
</style>